/*
  ESTILOS COMPARTIDOS
*/
:root {
  --sombra-sutil: 0 1px 4px rgba(0,0,0,0.06);
}


/*SECCIÓN FORMULARIO */
.seccion-formulario {
  margin: 16px 0px;
}

.seccion-encabezado {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.icono-seccion {
  font-size: 18px;
  line-height: 1;
}

.icono-naranja {
  background: var(--color-primary);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}
.icono-naranja i{
    color: var(--color-white);
}

.seccion-titulo {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-secondary);
}

.seccion-descripcion {
  font-size: 15px;
  color: var(--color-secondary);
  margin-bottom: 25px;
  line-height: 1.5;
}

.enlace-accion {
  color: var(--color-primary);
  text-decoration: underline;
  cursor: pointer;
}


.flexFlex{
  display:flex;
  flex-direction: column;
}







/*CAMPOS DE FORMULARIO*/
.grupo-campo {
  margin-bottom: 14px;
}
.grupo-campo-file{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 20px 0px;
}

.etiqueta-campo {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-secondary);
  margin-bottom: 5px;
  font-weight: 400;
}

.campo-requerido {
  color: var(--color-primary);
}

.campo-entrada {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--color-gray-light);
  border-radius: 6px;
  font-size: 13.5px;
  color: var(--color-secondary);
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
  font-weight: 400;
}
.campo-entrada-file{
  color: var(--color-secondary);
}
.grupo-campo-file p{
  color: var(--color-secondary);
  font-size: 12px;
  opacity: 0.5;
}

.campo-entrada:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(232, 121, 58, 0.12);
}

.campo-deshabilitado {
  color: #999;
  cursor: default;
}

/* SELECT PERSONALIZADO */
.contenedor-select {
  position: relative;
}

.campo-select {
  width: 100%;
  padding: 9px 36px 9px 12px;
  border: 1px solid var(--color-gray-light);
  border-radius: 6px;
  font-size: 13.5px;
  font-family: var(--fuente-principal);
  color: var(--color-secondary);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s;
}

.campo-select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(232, 121, 58, 0.12);
}

.flecha-select {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 13px;
  color: #999;
}

/* FILA DE DOS CAMPOS */
.fila-campos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

@media (max-width: 540px) {
  .fila-campos {
    grid-template-columns: 1fr;
  }
}

/*OPCIONES DE ENVÍO*/
.opcion-envio {
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  margin-bottom: 10px;
  overflow: hidden;
  transition: border-color 0.2s;
  background-color: #f4f4f4;
}

.opcion-envio.activa {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  opacity:1;
}

.opcion-envio-encabezado {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  cursor: pointer;
  user-select: none;
}

.radio-oculto {
  display: none;
}

.radio-custom {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 2px solid #ccc;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s;
}

.radio-custom.activo {
  border-color: var(--color-primary);
  background: var(--color-primary);
  box-shadow: inset 0 0 0 3px var(--color-white);
}

.opcion-envio-nombre {
  font-weight: 700;
  font-size: 14px;
  color: var(--color-secondary);
}

.opcion-envio.activa .opcion-envio-nombre {
  color: var(--color-primary);
}

.opcion-envio-contenido {
  padding: 0 16px 16px;
}

.opcion-envio-descripcion {
  padding: 0 16px 13px 42px;
  font-size: 13px;
  color: var(--color-secondary);
  line-height: 1.6;
}

.nota-entrega {
  font-size: 13px;
  color:#7C7B7B;
  font-style: italic;
  margin-top: 6px;
}


/*CHECKBOX*/
.fila-politica {
  margin: 14px 0 18px;
}

.contenedor-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  margin-top:20px;
}

.checkbox-campo {
  display: none;
}

.checkbox-custom {
  width: 16px;
  height: 16px;
  border: 1.5px solid #ccc;
  border-radius: 3px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.checkbox-campo:checked + .checkbox-custom {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.checkbox-campo:checked + .checkbox-custom::after {
  content: '✓'; /*IMPORTANTE SE LE AÑADIO ESTO PARA QUE APAREZCA EL CHECK CUANDO LE DEAMOS CLICK*/
  color: var(--color-white);
  font-size: 11px;
  font-weight: 700;
}

.texto-politica {
  font-size: 12.5px;
  color: var(--color-secondary);
}

/*BOTONES*/
.boton-primario {
  background: var(--color-primary);
  color: var(--color-white);
  border: none;
  border-radius: 10px;
  padding: 10px 28px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}
.boton-cotizar-whatsapp{
  background-color: var(--green);
  border-radius: 20px;
}

.boton-primario:hover {
  background: var(--color-primary-hover);
  transition: all ease .3s;
}

.boton-cotizar-whatsapp:hover{
  background-color: var(--green-hover);
}
.boton-primario:active {
  transform: scale(0.99);
}

.boton-ancho-completo {
  width: 100%;
  text-align: center;
}

/* El botón de abajo se oculta en escritorio se usa el del resumen*/
.boton-procesar-movil {
  display: none;
}

/*ESTILOS DE SHOPIN CART PERFIL HMTL*/
    /*LAYOUT PERFIL*/
    .contenedor-perfil {
      display: grid;
      grid-template-columns: 200px 1fr;
      gap: 24px;
      align-items: start;
      padding: 20px 0;
      margin-bottom:30px;
    }



    /* ===== MENÚ LATERAL ===== */
    .menu-lateral {
      display: flex;
      flex-direction: column;
      gap: 0;
      /*border-radius: 10px;*/
      overflow: hidden;
      background-color:var(--color-gray-super-light) ;
      height: 100%;
    }

    .menu-lateral-nombre {
      background: var(--color-primary);
      color: var(--color-white);
      font-weight: 500;
      font-size: 15px;
      text-align: center;
      padding: 14px 16px;
      margin-bottom: 20px;
      border-radius: 10px;
    }

    .menu-lateral-nombre-profesional{
      background-color: var(--color-tertiary);
    }

    .menu-lateral-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 7px 16px;
      font-size: 14px;
      font-weight: 400;
      color: var(--color-secondary);

      border: none;
      border-top: 1px solid #f0f0f0;
      cursor: pointer;
      text-decoration: none;
      transition: background 0.2s;
    }

    .menu-lateral-item:hover {
      background: var(--color-primary);
      color: var(--color-white);
    }

    .menu-lateral-item.activo {
      background: var(--color-primary);
      color: var(--color-white);
    }

    .menu-lateral-item .icono-menu.activo-icon {
      font-size: 12px;
      /**/
          width: 20px;
          height: 20px;
          border-radius: 50%;
          background: var(--color-white);
          display: flex;
          align-items: center;
          justify-content: center;
    }
    .menu-lateral-item .icono-menu.activo-icon i {
      color: var(--color-primary);font-size: 10px;
    }

    .menu-lateral-item:hover .icono-menu{
          background: var(--color-white);
    }
     .menu-lateral-item:hover .icono-menu i{
          color: var(--color-primary);
    }


    .menu-lateral-item .icono-menu {
      font-size: 12px;
      /**/
          width: 20px;
          height: 20px;
          border-radius: 50%;
          background: var(--color-secondary);
          display: flex;
          align-items: center;
          justify-content: center;
    }

    .menu-lateral-item .icono-menu i{
      color: var(--color-white);font-size: 10px;
    }


    /* ===== CONTENIDO PERFIL ===== */
    .contenido-perfil {
      background: var(--color-white);
      border: 1px solid var(--color-gray-light);
      border-radius: 10px;
      padding: 28px;
    }

    /* ===== SECCIÓN CONTRASEÑA ===== */
    .campo-contrasena-contenedor {
      position: relative;
    }

    .campo-contrasena-contenedor .campo-entrada {
      padding-right: 40px;
    }

    .boton-ver-contrasena {
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
      background: none;
      border: none;
      cursor: pointer;
      color: #aaa;
      font-size: 16px;
      padding: 0;
      line-height: 1;
    }
    .boton-ver-contrasena i{
      font-weight: 900;
    }

    .boton-ver-contrasena:hover {
      color: var(--color-primary);
    }
/*fin*/

/*estilos de shopping cart pre hmtl*/
/* ===== LAYOUT CARRITO ===== */
    .contenedor-carrito {
      display: grid;
      grid-template-columns: 1fr 300px;
      gap: 24px;
      align-items: start;
      margin-bottom:50px;
    }


    /* ===== RESUMEN DE COMPRA ===== */
    .resumen-compra {
      background:var(--color-gray-ultra-light);
      border: 1px solid #e8e8e8;
      border-radius: 15px;
      padding: 20px;
      position: sticky;
      top: 20px;
      margin:30px 0px;
    }

    .resumen-titulo {
      font-size: 15px;
      font-weight: 600;
      color: var( --color-secondary);
      padding-bottom: 10px;
      /*border-bottom: 1px solid #f0f0f0;*/
    }


    .resumen-items-count {
      display: flex;
      justify-content: space-between;
      font-size: 13px;
      color: #888;
    }

    .resumen-producto {
      display: flex;
      gap: 10px;
      margin-bottom: 12px;
      align-items: flex-start;
    }

    .resumen-producto-img {
      width: 48px;
      height: auto;
      border: 1px solid var(--color-gray-light);
      border-radius: 4px;
      padding: 5px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      background-color: var(--color-white);
    }

    .resumen-producto-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .resumen-producto-img .icono-producto {
      font-size: 18px;
    }

    .resumen-producto-info {
      flex: 1;
    }

    .resumen-producto-nombre {
      font-size: 12px;
      font-weight: 500;
      color: var( --color-secondary);
      line-height: 1.3;
    }

    .resumen-producto-cantidad {
      font-size: 11px;
      color: var( --color-secondary);
      margin-top: 2px;
      font-weight:400;
    }

    .separatorCart{
      height:0.5px;
      width:100%;
      background-color: var(--color-gray-light);
      margin-bottom:10px;
    }
    .separatorCart-top{
      margin-bottom: 30px;
    }

    .resumen-producto-precio {
      font-size: 13px;
      font-weight: 600;
       color: var( --color-secondary);
      white-space: nowrap;
    }

    .resumen-divisor {
      border: none;
      border-top: 1px solid #f0f0f0;
      margin: 14px 0;
    }

    /*ESTILO CUPÓN */
     .cupon-container{
            width: 100%;
            position: relative;
            display:flex;
            justify-content:space-between;
            margin-top: 20px;
            margin-bottom: 20px;
          }
          .cupon-container input{
            width: 65%;
            padding: 5px 10px;
            border-radius: 15px;
            border: 1px solid var(--color-primary);
            outline: none;
            color: var(--color-secondary);
            font-weight: 500;
            font-size:12px;
          }
          .cupon-container button{
            position: absolute;
            top: 0;
            right: 0;
            padding: 9px 10px;
            margin-top:-1px;
            border-radius: 15px;
            font-size:12px;
            background-color: var(--color-primary);
            border: 1px solid var(--color-primary);
            cursor: pointer;
            color: var(--color-white);
            font-weight: 500;
            transition: all ease .3s;
          }
          .cupon-container button:hover{
            background-color: var(--color-primary-hover);
          }
    /*FIN*/

    .resumen-fila {
      display: flex;
      justify-content: space-between;
      font-size: 13px;
       color: var( --color-secondary);
      margin-bottom: 8px;
    }

    .resumen-total {
      display: flex;
      justify-content: space-between;
      font-size: 15px;
      font-weight: 600;
       color: var( --color-secondary);
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px solid #f0f0f0;
    }

    .boton-procesar-resumen {
      width: 100%;
      margin-top: 16px;
    }
/**/



/*ESTILOS CARRITO DE COMPRAS OJO*/
/* ===== LAYOUT PRINCIPAL ===== */
  .contenedor-lista-carrito {
    display: grid;
    grid-template-columns: 1fr 330px;
    gap: 24px;
    align-items: start;
    padding-bottom: 40px;
    margin-top: 20px;
  }

  /* ===== LÍNEA SEPARADORA BAJO MIGA ===== */
  .separador-linea {
    border: none;
    border-top: 1px solid #e8e8e8;
    margin-bottom: 24px;
  }

  /* ===== TABLA FLEX ===== */
  .tabla-flex {
    width: 100%;
    overflow: hidden;
    margin-top: 30px;
  }

  /* ENCABEZADO */
  .tabla-flex-header {
    display: flex;
    align-items: center;
    background: var(--color-primary);
    border-radius: 20px;
    padding: 15px 20px;
    gap: 8px;
  }

  .tabla-flex-header span {
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing:2;
    color: var(--color-white);
    white-space: nowrap;
    text-align: center;
  }

  /* DISTRIBUCIÓN DE COLUMNAS */
  .col-producto  { flex: 0 0 44%; text-align: left; }
  .col-precio    { flex: 0 0 18%; text-align: center; }
  .col-cantidad  { flex: 0 0 20%; text-align: center; }
  .col-subtotal  { flex: 0 0 16%; text-align: center; }

  /* FILAS */
  .tabla-flex-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 18px 20px;
    border-bottom: 1px solid #f2f2f2;
  }

  .tabla-flex-row:last-child {
    border-bottom: none;
  }

  /* CELDA PRODUCTO */
  .celda-producto {
    flex: 0 0 44%;
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .boton-eliminar {
    width: 28px;
    height: 28px;
    border-radius: 5px;
    border: 1px solid var(--gris-claro);
    background: var(--gris-claro);
    font-size: 14px;
    font-weight: 700;
    color: var(--color-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: border-color 0.2s, color 0.2s;
  }

  .boton-eliminar:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
  }

  .producto-imagen {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    border: 1px solid var(--gris-claro);
    padding: 6px;
    background: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
  }

  .producto-imagen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .producto-datos {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }

  .producto-nombre {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-secondary);
    line-height: 1.3;
  }

  .producto-marca {
    display: inline-block;
    background: var(--color-secondary);
    opacity: 0.5;
    color: var(--color-white);
    font-size: 10px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 4px;
    letter-spacing: 0.5px;
    width: fit-content;
  }

  /* CELDA PRECIO */
  .celda-precio {
    flex: 0 0 18%;
    text-align: center;
  }

  .precio-actual {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-secondary);
  }

  .precio-tachado {
    font-size: 13px;
    color: var(--color-secondary);
    text-decoration: line-through;
    margin-top: 2px;
    font-weight: 500;
    opacity: 0.8;
  }

  /* CELDA CANTIDAD */
  .celda-cantidad {
    flex: 0 0 22%;
    display: flex;
    justify-content: center;
  }

  .control-cantidad {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  .boton-cantidad {
    width: 30px;
    height: 30px;
    border: 1.5px solid var(--gris-claro);
    border-radius: 6px;
    background: var(--gris-claro);
    font-size: 16px;
    font-weight: 700;
    color: var(--color-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s, color 0.2s;
    flex-shrink: 0;
  }

  .boton-cantidad:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
  }

  .numero-cantidad {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-secondary);
    min-width: 20px;
    text-align: center;
  }

  /* CELDA SUBTOTAL */
  .celda-subtotal {
    flex: 0 0 16%;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-secondary);
  }

  /* ===== ACCIONES INFERIORES ===== */
  .acciones-carrito {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 24px;
    margin-top: 28px;
  }

  .boton-secundario-oscuro {
    background: var(--color-secondary);
    color: var(--color-white);
    border: none;
    border-radius: 50px;
    padding: 10px 32px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
  }

  .boton-secundario-oscuro:hover { background: #111; }

  .boton-texto-plano {
    background: none;
    border: none;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-secondary);
    cursor: pointer;
    transition: color 0.2s;
  }

  .boton-texto-plano:hover { color: var(--color-primary); }

  /* ===== RESPONSIVE TABLET (≤960px): 1 columna, tabla sigue visible ===== */
  @media (max-width: 960px) {

    .contenedor-lista-carrito {
      grid-template-columns: 1fr;
    }

    .resumen-compra {
      order: -1;
      position: relative;
      top: auto;
    }

    .acciones-carrito {
      flex-direction: column;
      gap: 12px;
      margin-top: 50px;
    }

    .boton-secundario-oscuro {
      width: 100%;
      text-align: center;
    }
    .contenedor-lista-carrito{
      gap: 0px;
    }
  }


/*FIN CARRITO DE COMPRAS*/




@media (max-width: 768px) {
  .boton-procesar-movil {
    display: block;
    margin-top: 8px;
    margin-bottom:30px;
  }


  /*ESTILOS DE SHOPIN CART PERFIL*/
  .contenedor-perfil {
        grid-template-columns: 1fr;
      }
      .menu-lateral {
        display: flex;
        flex-direction: column;
        gap: 0;
      }
      .menu-lateral-item {
        flex: 1;
        text-align: center;
        border-radius: 0;
      }
  /**/

  /*estilos de shopin cart pre hmtl*/
   .contenedor-carrito {
        grid-template-columns: 1fr;
      }
      .resumen-compra {
        order: -1;
        position: static !important ;/*con esto funciona muy bien en response ya que teniamos problemas*/
      }
  /*fin*/


  .flexFlex{
   flex-direction: row;
  }
  .menu-lateral-item{
    display:flex;
    flex-direction: column;
    line-height:1;
  }


  .seccion-descripcion {
    font-size: 12px;
  }

}

/*ESTILOS CARRITOS DE COMPRAS MOVILE*/
/* ===== RESPONSIVE MOBILE (≤600px): cards por producto ===== */
  @media (max-width: 600px) {

    /* Ocultar encabezado de columnas */
    .tabla-flex-header {
      display: none !important;
    }

    /* Quitar borde y sombra del contenedor en mobile */
    .tabla-flex {
      border: none;
      box-shadow: none;
      background: transparent;
    }

    /* Cada fila = card individual */
    .tabla-flex-row {
      flex-direction: column !important;
      align-items: flex-start !important;
      padding: 16px !important;
      margin-bottom: 10px;
      gap: 0 !important;
      background: var(--color-white);
      border: 1px solid #e8e8e8 !important;
      border-radius: 10px;
      box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    }

    .tabla-flex-row:last-child {
      margin-bottom: 0;
      border-bottom: 1px solid #e8e8e8 !important;
    }

    /* Celda producto: ancho completo */
    .celda-producto {
      flex: none !important;
      width: 100% !important;
      padding-bottom: 12px;
    }

    /* Imagen ajustada */
    .producto-imagen {
      width: 68px;
      height: 68px;
    }

    /* Nombre más grande */
    .producto-nombre {
      font-size: 15px;
    }

    /* Celdas precio / cantidad / subtotal: fila con etiqueta */
    .celda-precio,
    .celda-cantidad,
    .celda-subtotal {
      flex: none !important;
      width: 100% !important;
      display: flex !important;
      align-items: center;
      text-align: left !important;
      justify-content: flex-start;
      padding: 8px 0;
      /*border-top: 1px solid #f2f2f2;*/
    }

    .celda-precio::before {
      content: "Precio:";
      font-size: 12px;
      font-weight: 600;
      color: #aaa;
      width: 90px;
      flex-shrink: 0;
    }

    .precio-tachado{
      margin-left:10px;
    }

    .celda-cantidad::before {
      content: "Cantidad:";
      font-size: 12px;
      font-weight: 600;
      color: #aaa;
      width: 90px;
      flex-shrink: 0;
    }

    .celda-subtotal::before {
      content: "Sub Total:";
      font-size: 12px;
      font-weight: 600;
      color: #aaa;
      width: 90px;
      flex-shrink: 0;
    }

    /* Sub Total resaltado */
    .celda-subtotal {
      font-size: 15px !important;
    }

    /* Acciones en columna */
    .acciones-carrito {
      flex-direction: column;
      gap: 10px;
     /* margin-top: 50px;*/
    }

    .boton-secundario-oscuro,
    .boton-texto-plano {
      width: 100%;
      text-align: center;
    }

    .boton-texto-plano {

      border-radius: 50px;
      padding: 10px 0;
    }
  }